<template>
  <div class="card-box">
    <div class="time-box" v-if="value.showTime && value.applyTime">
      <van-image class="time-img" width="12" height="12" :src="timeImg" />
      <span class="time">申请日期：{{ value.applyTime }}</span>
    </div>
    <div class="card-item" @click="handleToDetail">
      <div class="card-header">
        <div class="header-title">申请人: {{ value.applyName }}</div>
        <!-- <div v-show="isShow" class="close">
          <van-image width="15" height="15" :src="imgSrc" />
          <span class="img-title">结束监管</span>
        </div> -->
      </div>
      <div class="card-body">
        <ul class="apply-info">
          <li>单号：{{ value.applyOrderNo }}</li>
          <!-- <li>申请时间：{{ value.applyTime }}</li> -->
          <li>建房类型：{{ value.buildTypeName }}</li>
          <li>申请内容：{{ value.applyContent }}</li>
        </ul>
        <div v-show="isShow" class="reapply" @click.stop="handleHandle">
          去办理
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, onMounted, computed, toRefs, watch } from "vue";
import { useRouter } from "vue-router";
import imgSrc from "@/assets/Images/close1.png";
import timeImg from "@/assets/Images/time.png";
export default {
  props: {
    value: {
      type: Object,
      default: () => {
        return {};
      },
    },
    // applyType: 1待办理  2办理中 3已结束
    isShow: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const router = useRouter();
    const state = reactive({
      timeImg: timeImg,
      imgSrc: imgSrc,
      applyType: 1,
      value: props.value,
    });

    onMounted(async () => {});

    const handleToDetail = () => {
      let id = props.value.applyBaseId;
      router.push({ path: `/government/build-apply/detail/${id}` })
    };
    // 办理
    const handleHandle = () => {
      let id = props.value.id;
      let applyBaseId = props.value.applyBaseId;
      let url = "/government/start-work/handle";
      router.push({ path: url, query: { id: id, applyBaseId: applyBaseId } });
    };
    // 重新申请
    const handleReset = () => {};

    const showEditBtn = computed(() => {
      return [1, 2].includes(Number(props.applyType));
    });
    const tagClass = computed(() => {
      let tagClass = "";
      return tagClass;
    });
    watch(
      () => props.applyType,
      (type) => {
        state.applyType = type;
      },
      { immediate: true }
    );
    return {
      ...toRefs(state),
      tagClass,
      showEditBtn,
      handleToDetail,
      handleHandle,
      handleReset,
    };
  },
};
</script>

<style lang="less" scoped>
@import "@/common/style/mixin";
.card-box {
  margin-top: 10px;
  color: #2e3f6a;
  font-weight: 400;
  .header-title {
    font-size: 16px;
    font-weight: bold;
    .title {
      width: 190px;
      line-height: 28px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .fj();
    .notice-status {
      background: #e1f1ff;
      border-radius: 3px;
      color: #216eec;
      font-size: 13px;
      font-weight: 400;
      padding: 4px 14px 5px;
    }
    .status-success {
      background-color: #e8f7e0;
      color: #5eb02d;
    }
    .status-info {
      background-color: #ddf6fa;
      color: #009eb6;
    }
    .status-danger {
      background-color: #ffe9e9;
      color: #df3838;
    }
    .finish {
      background-color: #72c604;
    }
  }
  .time-box {
    margin-bottom: 10px;
    .time {
      color: #9297ae;
      font-size: 13px;
      font-weight: 400;
      margin-left: 6px;
    }
  }
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .close {
      background: #f4f5f9;
      padding: 4px 14px;
      font-size: 14px;
      font-weight: 400;
      color: #2e3f6a;
      border-radius: 10px;
      .img-title {
        margin-left: 5px;
        margin-bottom: 5px;
      }
    }
  }
  .card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .apply-info {
      li {
        margin-top: 8px;
      }
    }
    .reapply {
      text-align: center;
      background: linear-gradient(90deg, #206dec, #359eff);
      border-radius: 5px;
      color: @fc;
      font-size: 13px;
      font-weight: 400;
      padding: 4px 14px 5px;
      // width: 80px;
    }
  }
}
</style>